<template>
	<section>
		<!--start 面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>设置</el-breadcrumb-item>
				<el-breadcrumb-item>公司信息</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--end 面包屑-->
		<!--start content-->
		<div class="wrap companyWrap" ref="companyWrap">
			<el-form :model="companyMsgData" :rules="rules" ref="dataForm" label-width="100px" class="formFontSizeMini scroll">
				<el-row :gutter="20">
					<el-col :span="24">
						<div class="title">基础信息</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="公司名称" prop="companyName">
							<el-input v-model="companyMsgData.companyName" :placeholder="placeholder.companyName"></el-input>
						</el-form-item>
					</el-col>
							   <!--cropRatio="3:1"-->
					<el-col :span="12" class="logoDiv">
						<el-form-item label="公司logo">
							<el-upload
							  title="建议公司LOGO宽高比为3:1,图片小于2M,类型为jpg和png"
							  class="avatar-uploader"
							  :action="uploadUrl"
							  :show-file-list="false"
							  :data="uploadData"
							  :on-success="handleAvatarSuccess"
							  :on-error="handleAvatarError"
							  :on-progress="handleAvatarProgress"
							  :on-change="handleAvatarChange"
							  :before-upload="beforeAvatarUpload">
							  <img v-if="logoImgSrc" :src="logoImgSrc" class="avatar" height="95" width="auto">
							  <i v-else class="avatar-uploader-icon" :class="{'el-icon-plus':!uploading,'el-icon-loading':uploading}"></i>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="公司简称" prop="companyAbbreviate">
              <el-input v-model="companyMsgData.companyAbbreviate" :placeholder="placeholder.companyAbbreviate"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="行业类别">
							<el-select class="selectWidth" v-model="companyMsgData.companyIndustry" :placeholder="placeholder.companyIndustry">
								<el-option v-for="(item,index) in companyMsgData.industryList" :label="item.ddlistName" :value="item.ddlistCode"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="所在地区" prop="detailedArea">
							<el-cascader class="selectWidth" popper-class="kael" :options="detailedAreaList" @change="areaChangeFn" v-model="companyMsgData.detailedArea" :props="areaProps">
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="详细地址" prop="companyAddress">
							<el-input v-model="companyMsgData.companyAddress" :placeholder="placeholder.companyAddress"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="邮编" prop="companyPostcode">
							<el-input v-model="companyMsgData.companyPostcode" :placeholder="placeholder.companyPostcode"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="电话" prop="companyPhone">
							<el-input v-model="companyMsgData.companyPhone" :placeholder="placeholder.companyPhone"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="传真" prop="companyFax">
							<el-input v-model="companyMsgData.companyFax" :placeholder="placeholder.companyFax"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="公司介绍">
							<el-input type="textarea" v-model="companyMsgData.compantRemark" :placeholder="placeholder.compantRemark"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="公司网址">
							<el-input v-model="companyMsgData.companyWeb" :placeholder="placeholder.companyWeb"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<!--<el-row :gutter="20">
					<el-col :span="24">
						<div class="title">管理员信息</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="联系人" prop="operatorName">
							<el-input v-model="companyMsgData.operatorName" :placeholder="placeholder.operatorName"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="职位">
							<el-select class="selectWidth" v-model="companyMsgData.operatorPosition" :placeholder="placeholder.operatorPosition">
								<el-option v-for="(item,index) in companyMsgData.operatorPositionList" :label="item.ddlistName" :value="item.ddlistCode"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="手机" prop="operatorPhone">
							<el-input v-model="companyMsgData.operatorPhone" :placeholder="placeholder.operatorPhone"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="QQ" prop="operatorQq">
							<el-input v-model="companyMsgData.operatorQq" :placeholder="placeholder.operatorQq"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="邮箱" prop="operatorEmail">
							<el-input v-model="companyMsgData.operatorEmail" :placeholder="placeholder.operatorEmail"></el-input>
						</el-form-item>
					</el-col>
				</el-row>-->
				<el-row :gutter="20">
					<el-col :span="24">
						<div class="title">财务信息</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="纳税人识别号">
							<el-input v-model="companyMsgData.companyInvoiceTaxId" :placeholder="placeholder.companyInvoiceTaxId"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="发票抬头">
							<el-input v-model="companyMsgData.companyInvoiceTitle" :placeholder="placeholder.companyInvoiceTitle"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div class="btnBox" :class="{btnBox1:!$store.state.headFold}">
			<el-button type="primary" @click="updateCompanyMsgFn">保存</el-button>
			<el-button @click="cancelFn">取消</el-button>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	import * as companyMsgDatas from '../../../assets/data/companyMsgData';
	import VueCoreImageUpload  from 'vue-core-image-upload';
	export default {
    components: {VueCoreImageUpload},
		data() {
			var mobileRule = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('手机不能为空'));
				}
				if(/^(13[0-9]|14[57]|15[012356789]|177|18[012356789])\d{8}$/.test(value)) {
					callback();
				} else {
					callback(new Error('手机号码格式不正确'));
				}
			};
			var areaRule = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('地区不能为空'));
				}else{
					callback();
				}
			};
			var companyPostcodeRule = (rule, value, callback) => {
				if(!value) {
					return callback();
				}

				if(/^\d{6}$/.test(value)) {
					callback();
				}else{
					return callback(new Error('邮编格式不正确'));
				}
			};
			var operatorQqRule = (rule, value, callback) => {
				if(/[1-9]([0-9]{5,11})/.test(value)) {
					callback();
				}else{
					return callback(new Error('qq号码格式不正确'));
				}
			};
			var operatorEmailRule = (rule, value, callback) => {
				if(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
					callback();
				}else{
					return callback(new Error('Email格式不正确'));
				}
			};
			var operatorPhoneRule = (rule, value, callback) => {
				if(!value){
					callback();
				}
				if(/^([0-9])\d{7}$/.test(value)) {
					callback();
				}else{
					return callback(new Error('手机号格式不正确'));
				}
			};
			var operatorFaxRule = (rule, value, callback) => {
				if(!value){
					callback();
				}
				if(/^([0-9])\d{7}$/.test(value)) {
					callback();
				}else{
					return callback(new Error('传真格式不正确'));
				}
			};
			return {
				detailedAreaList: [],
				areaProps: {
					value: 'treeCode',
					children: 'children',
					label: 'treeName'
				},
				fontColor: "#03B8CC",

				/* start upload */
				logoImgSrc: "",
				isLogoImgSrc:false,
				uploadUrl:"/v3/misc/common/uploadFile",
				uploadData:{
					"moduleName":"basic",
					"fileName":""
				},
				uploading:false,
				canUpload:true,
				/* end upload */

				companyMsgData: {
					companyName: "",
          companyAbbreviate:"",
					companyIndustry: "",
					detailedArea: [],
					companyAddress: "",
					companyPostcode: "",
					companyPhone: "",
					companyFax: "",
					compantRemark: "",
					companyWeb: "",
					operatorName: "",
					operatorPosition: "",
					operatorPhone: "",
					operatorQq: "",
					operatorEmail: "",
					companyInvoiceTaxId: "",
					companyInvoiceTitle: "",
					industryList: [],
					operatorPositionList:[]
				},
				placeholder: {
					companyName: "请输入公司名称",
          companyAbbreviate:"请输入公司简称",
					companyIndustry: "请选择行业类别",
					detailedArea: "请选择所在地区",
					companyAddress: "请输入公司详细地址",
					companyPostcode: "请输入邮编",
					companyPhone: "请输入公司电话",
					companyFax: "请输入公司传真",
					compantRemark: "请输入公司介绍",
					companyWeb: "请输入公司网址",
					operatorName: "请输入联系人",
					operatorPosition: "请输入联系人职位名称",
					operatorPhone: "请输入手机号码",
					operatorQq: "请输入qq号码",
					operatorEmail: "请输入联系人邮箱",
					companyInvoiceTaxId: "请输入纳税人识别号",
					companyInvoiceTitle: "请输入发票抬头"
				},
				rules: {
					companyName: [{required: true, message: '公司名称不能为空', trigger: 'blur'}],
          companyAbbreviate:[{required: true, message: '公司简称不能为空', trigger: 'blur'}],
					//detailedArea: [{required: true, validator: areaRule, trigger: 'blur'}],
					//companyAddress: [{required: true, message: '详细地址不能为空', trigger: 'blur'}],
					//operatorName: [{required: true, message: '联系人不能为空', trigger: 'blur'}],
					//operatorPhone: [{required: true, validator: mobileRule, trigger: 'blur'}],
					companyPostcode:[{validator: companyPostcodeRule, trigger: 'blur'}],
					operatorQq:[{validator: operatorQqRule, trigger: 'blur'}],
					operatorEmail:[{validator: operatorEmailRule, trigger: 'blur'}],
					companyPhone:[{validator: operatorPhoneRule, trigger: 'blur'}],
					companyFax:[{validator: operatorFaxRule, trigger: 'blur'}],
				}
			}
		},
		watch:{
      logoImgSrc:function(val,oldVal){
          return val
      }
    },

		methods: {
			/* start uploadLOGO */
			handleAvatarSuccess(res, file , fileList) {
				this.uploading = false;
        this.canUpload = true;
        this.isLogoImgSrc = true;
				this.logoImgSrc = res;
				this.$store.commit('newHeaderLogo',res);
			},
			handleAvatarError(err, file , fileList){
				this.uploading = false;
		      	this.canUpload = true;
	      		this.isLogoImgSrc = !!this.logoImgSrc;
		      	this.Public.openError(this,"LOGO上传失败");
			},
			handleAvatarProgress(event, file, fileList){

			},
			handleAvatarChange(file, fileList){

			},
			beforeAvatarUpload(file) {
				this.uploading = true;
		      	this.canUpload = false;
		      	this.isLogoImgSrc = false;
		      	this.uploadData.fileName = file.name;

				const isJPG = file.type === 'image/jpeg';
		        const isPNG = file.type === 'image/png';
		        const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isJPG&&!isPNG) {
					this.uploading = false;
			      	this.canUpload = true;
		        	this.Public.openError(this,"上传头像图片只能是 JPG和PNG 格式!")
		        }
				if(!isLt2M) {
					this.uploading = false;
			      	this.canUpload = true;
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return (isPNG || isJPG) && isLt2M;
			},
			/* end uploadLOGO */
			areaChangeFn(vuale) {
				console.log(vuale)
				//				this.areaVal = vuale
			},
			updateCompanyMsgFn() {
				this.$refs.dataForm.validate((valid) => {
					if(valid) {
						if(!this.uploading){
							this.axios({
								method: "PUT",
								url: "/v3/member/companys",
								data: {
									"companyName": this.companyMsgData.companyName, // 公司名称
                  "companyAbbreviate": this.companyMsgData.companyAbbreviate, // 公司简称
									"companyLogo": this.logoImgSrc, // 公司Logo
									"companyIndustry": this.companyMsgData.companyIndustry, //行业类别
									"areaCode": this.companyMsgData.detailedArea.join(','), //所在地区
									"companyAddress": this.companyMsgData.companyAddress, //公司详细地址
									"companyPostcode": this.companyMsgData.companyPostcode, //邮编
									"companyPhone": this.companyMsgData.companyPhone, //公司电话
									"companyFax": this.companyMsgData.companyFax, //公司传真
									"compantRemark": this.companyMsgData.compantRemark, //公司介绍
									"companyWeb": this.companyMsgData.companyWeb, //公司网址
									"companyInvoiceTaxId": this.companyMsgData.companyInvoiceTaxId, //纳税人识别码
									"companyInvoiceTitle": this.companyMsgData.companyInvoiceTitle, //发票抬头

									"operatorName": this.companyMsgData.operatorName, //联系人
									"operatorPosition": this.companyMsgData.operatorPosition, //联系人职位名称
									//"operatorPhone": this.companyMsgData.operatorPhone, //手机号码
									"operatorQq": this.companyMsgData.operatorQq, //qq号码
									"operatorEmail": this.companyMsgData.operatorEmail //联系人邮箱
								}
							}).then((res) => {
								this.$store.commit('newHeaderLogo',this.logoImgSrc);
								this.Public.openSuccess(this,"操作成功！");
							}).catch((err) => {
								this.Public.openError(this,err.response.data)
							})
						}else{
							this.Public.openError(this,"Logo上传中")
						}
					}else{
						return false;
					}
				})
			},
			cancelFn() {
				this.$router.go(-1)
			},

		},
		created() {
			/* 请求地区 */
			this.detailedAreaList = companyMsgDatas.areaData;
			/* 请求接口获取信息 */
			this.axios({
				method: "GET",
				url: "/v3/member/companys"
			}).then((res) => {
          this.logoImgSrc = res.data.companyLogo || "";
					this.companyMsgData.companyName = res.data.companyName || ""; // 公司名称
          this.companyMsgData.companyAbbreviate = res.data.companyAbbreviate || "";    //公司简称
					this.companyMsgData.companyIndustry = res.data.companyIndustry || ""; //行业类别
					this.companyMsgData.detailedArea = res.data.areaCode.split(",") || ["00", "36", "3601"]; //所在地区
					this.companyMsgData.companyAddress = res.data.companyAddress || ""; //公司详细地址
					this.companyMsgData.companyPostcode = res.data.companyPostcode || ""; //邮编
					this.companyMsgData.companyPhone = res.data.companyPhone || ""; //公司电话
					this.companyMsgData.companyFax = res.data.companyFax || ""; //公司传真
					this.companyMsgData.compantRemark = res.data.compantRemark || ""; //公司介绍
					this.companyMsgData.companyWeb = res.data.companyWeb || ""; //公司网址
					this.companyMsgData.companyInvoiceTaxId = res.data.companyInvoiceTaxId || ""; //纳税人识别码
					this.companyMsgData.companyInvoiceTitle = res.data.companyInvoiceTitle || ""; //发票抬头

					this.companyMsgData.operatorName = res.data.operatorName || ""; //联系人
					this.companyMsgData.operatorPosition = res.data.operatorPosition || ""; //联系人职位名称
					this.companyMsgData.operatorPhone = res.data.operatorPhone || ""; //手机号码
					this.companyMsgData.operatorQq = res.data.operatorQq || ""; //qq号码
					this.companyMsgData.operatorEmail = res.data.operatorEmail || ""; //联系人邮箱
			}).catch((error) => {
				this.Public.openError(this,err.response.data)
			});
			/* 请求行业类别 */
			this.axios({
				 method: "POST",
			     url: "/v3/basic/ddlists/00100000005/listAll",
			     data: {}
			}).then((res) => {
					this.companyMsgData.industryList = res.data.list;
			}).catch((error) => {
				//this.companyMsgData.industryList = companyMsgDatas.industryListData;
				this.Public.openError(this,err.response.data)
			});

		},
		mounted() {
			this.$refs.companyWrap.style.height = (document.documentElement.clientHeight - 180) + 'px';
			document.querySelector(".companyWrap form").style.height = (document.documentElement.clientHeight - 180) + 'px';

		}
	}
</script>

<style>
	*{
		transition:.2s;
	}
	section {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	div.location {
		flex: 0 0 10px;
    padding: 3px 0 15px 0;
	}

	div.wrap {
		position: relative;
		flex: 1;
		width: 100%;
		padding: 15px 20px 0 20px;
		box-sizing: border-box;
		background: #fff;
	}

	.scroll {
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 10px;
	}

	.title {
		height: 50px;
		color: #03B8CC;
		font-size: 16px;
	}

	.selectWidth {
		width: 100%;
	}

	.btnBox {
		position: absolute;
		bottom: 10px;
		left:180px;
		height: 50px;
		background: #fff;
		z-index: 100;
	}
	.btnBox1 {
		left:98px;
	}
	/* start upload */
	.avatar-uploader {
	    position: relative;
		border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    overflow: hidden;
	    z-index: 9;
	}
	.avatar-uploader:hover {
		border-color: #03B8CC;
	}
	.avatar-uploader-icon {
		font-size: 20px;
		color: #8c939d;
		width: 95px;
		height: 95px;
		line-height: 95px;
		text-align: center;
	}
	.avatar-uploader .g-core-image-upload-form {
	    width: 100% !important;
	    height: 100% !important;
	    cursor: pointer;
	}
	.avatar-uploader .g-core-image-upload-form>input {
	    position: relative;
	    top: -4px;
	    cursor: pointer;
	}
	.crop-box .g-resize {
		background-color: red !important;
	}
	/* end upload */
</style>
